<template>
  <q-input
    class="col"
    filled
    dense
    placeholder="筛选"
    :dark="dark"
    color="grey-5"
    style="min-width: 120px"
    v-model="query"
  >
    <template v-slot:prepend>
      <q-icon name="filter_list" />
    </template>
  </q-input>
</template>

<script lang="ts">
import { emitter } from 'src/emitter';
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'filter-input',

  props: {
    id: {
      type: String,
    },
    dark: {
      type: Boolean,
      default: true,
    },
  },

  setup(props) {
    const query = ref('');

    watch(query, () => {
      emitter.emit('table_filter', { id: props.id, query: query.value });
    });

    return { query };
  },
});
</script>
